<template>
	<view>
		<view v-if="gonggaoList.length>0">
			<view v-for="(item,i) in gonggaoList" :key="item.id">
				<view class="dtl-box" @click="goGonggao(item.id)">
					<view class="dtl-head">
						<view class="beizhu">{{item.title}}</view>
						<view class="money">{{item.createTime}}</view>
					</view>
					<view class="dtl-body">
						<!-- <u-parse :html="item.message"></u-parse> -->
						<mp-html :content="switchImage(item.message)" />
					</view>
				</view>
			</view>
		</view>
		<view class="tips-text" v-if="gonggaoList.length<1">{{tips}}</view>
	</view>
</template>

<script>
	import mpHtml from '@/components/mp-html/mp-html'
	export default {
		data() {
			return {
				gsId:'',			//品牌公司ID
				gonggaoList:[],		//品牌公司公告集合
				page:1,		  		//页数
				limit:10,	  		//条数
				tips:"上拉加载更多数据",
			}
		},
		onReachBottom() {
			if(this.tips=='上拉加载更多数据'){
				this.page++;
				this.getGonggao()
			}
		},
		onLoad(opt) {
			this.gsId = opt.gsId;
			this.getGonggao()
		},
		methods: {
			getGonggao(){
				this.$http.get('/pp_tongzhi/getTongzhi',{
					gsid:this.gsId,
					page:this.page,
					limit:this.limit
				}).then(res => {
					if(res.data.data.length>0){
						// for (let i = 0; i < res.data.data.length; i++) {
						// 	let subStr = new RegExp('/image/','ig');
						// 	res.data.data[i].message = res.data.data[i].message.replace(subStr,this.host+'/image/')
						// }
						this.gonggaoList = this.gonggaoList.concat(res.data.data);
						if(this.page==1 && res.data.data.length < this.limit){
							this.tips="";
						}
					}else{
						this.tips="没有更多数据了";
					}
				})
			},
			//跳转公告详情
			goGonggao(id){
				uni.navigateTo({
					url:'gonggaoDetail?id='+id
				})
			},
			// 转换图片地址
			switchImage(url){
				var reg = /\"\/image/g;
				url = url.replace(reg,'"'+this.host+'/image');
				return url.substr(0,120);
			}
		},
		components:{
			mpHtml
		}
	}
</script>

<style>
	.no-goods-box,.tips-text{
		text-align: center;
	}
	.tixian-box{
		margin-top: 50px;
		background-color: white;
		padding: 10px;
	}
	.dtl-box{
		background-color: white;
		border-bottom: 1px solid #ccc;
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 10px;
	}
	.dtl-body{
		height: 100rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.dtl-head,.dtl-body{
		padding: 5px;
		display: flex;
		justify-content: space-between;
	}
	.dtl-head{
		font-size: 18px;
	}
	.time{
		color: #c7c7c7;
		font-size: 12px;
	}
	.beizhu,.money{
		flex: 1;
	}
	.beizhu{
		color: #3a8ee6;
	}
	.beizhu,.time{
		/*文本溢出*/
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap
	}
	.time img{
		/*width: 20px;*/
		height: auto;
		width: auto;
		max-height: 16px;
		max-width: 16px;
	}
	.money{
		font-size: 10px;
		text-align: right;
	}
	#refreshContainer{
		padding-top: 4px;
	}
	#nogonggao{
		text-align: center;
		display: none;
		margin-top: 50px;
	}
</style>
